<script lang="ts" setup>
import HeaderView from './comps/HeaderView.vue'
import LeftMenu from './comps/LeftMenu.vue'
</script>

<template>
  <div class="layout-container">
    <!--左侧菜单-->
    <left-menu />

    <!--内容-->
    <div class="main-body">
      <div class="main-content">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </div>

      <!--顶部头-->
      <header-view />
    </div>
  </div>
</template>
<style scoped lang="scss">
.layout-container {
  @include abs-group();
  @include hor-group();

  .main-body {
    flex:auto;
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;

    .main-content{
      @include abs-group(0,$w-header-size,0,0);
    }

  }

  :deep(.el-tabs__content){
    height:calc(100% - 50px);
  }
  :deep(.el-tab-pane){
    height:100%;
    position:relative;
  }
}

</style>
